<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model原理分析</title>
</head>

<body>

  <pre>
    v-model = v-on:input + v-bind:value

    视图层内容能够同步到数据模型 data ，这是因为 vue 底层做了数据监听 (v-on: input)的操作
    数据模型 data 数据能够同步到 视图层，底层做了 数据绑定 (v-bind:value) 的操作
    
  </pre>
  <div class="app">
    <p v-text='val'></p>
    <input type="text" :value='val' @input='handle'>
    <!-- 优化 -->
    <input type="text" :value='val' @input='val=$event.target.value'>
    <!-- 相当于 v-model -->
    <input type="text" v-model='val'>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '.app',
      data: {
        val: 'hello'
      },
      methods: {
        handle(e) {
          this.val = e.target.value
        }
      }
    })
  </script>
</body>

</html>